<template>
	<!-- Content -->
	<view class="container">
		<!-- Backdrop -->
		<image style="width: 100%; height: 100%; position: fixed;" mode="aspectFill"
			src="../../static/login/ic_login_backdrop.png"></image>
		<!-- Toolbar -->
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<!-- Logo -->
		<view style="display: flex; align-items: center; justify-content: center;margin-top: 200rpx;"
			:style="{'padding-top':((actionBarHeight+5)+'px')}">
			<image style="width: 288rpx;" mode="widthFix" src="../../static/login/ic_login_logo.png"></image>
		</view>
		<!-- Account -->
		<view class="uni-flex input-container">
			<input class="input" placeholder="请输入手机号" type="number" maxlength="11" @focus="onFocus" @blur="onBlur" />
		</view>
		<!-- Password -->
		<view class="uni-flex input-container" style="margin-top: 20rpx;">
			<input class="input" placeholder="请输入验证码" type="number" maxlength="4" @focus="onFocus" @blur="onBlur" />
			<view class="code">获取验证码</view>
		</view>
		<!-- 政策 -->
		<view class="uni-flex" style="display: flex; align-items: baseline; margin: 0rpx 65rpx; margin-top: 90rpx;">
			<radio color="rgba(62, 59, 54, 1)" style="transform:scale(0.7); " />
			<view style=" color: rgba(41, 43, 53, 0.8); font-size: 24rpx;">
				阅读并同意《服务协议》及《个人信息处理规则》和《运输管理协议》等
			</view>
		</view>
		<!-- 登录 -->
		<view class="login">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nvConfig: {
					title: " ",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
					transparent: {
						initColor: "#000000",
					}
				},
			}
		},
		computed: {
			actionBarHeight() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		methods: {
			onFocus() {
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'none'
				})
			},
			onBlur() {
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'auto'
				})
			},
		},
	}
</script>

<style>
	@import '@/common/uni-nvue.css';

	page {
		background-color: white;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.input-container {
		height: 90rpx;
		margin: 0rpx 65rpx;
		margin-top: 99rpx;
		padding-left: 45rpx;
		padding-right: 31rpx;
		display: flex;
		align-items: center;
		background-color: rgba(245, 246, 249, 1);
		border-radius: 42rpx;
	}

	.input {
		font-size: 28rpx;
		-webkit-flex: 1;
		flex: 1;
		color: rgba(41, 43, 53, 1);
	}

	.code {
		width: 160rpx;
		height: 54rpx;
		color: rgba(41, 43, 53, 1);
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(248, 216, 73, 1);
		border-radius: 10rpx;
	}

	.login {
		margin-top: 27rpx;
		margin-bottom: 30rpx;
		margin-left: 65rpx;
		margin-right: 65rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		color: rgba(41, 43, 53, 1);
		font-size: 28rpx;
		font-weight: bold;
		background-color: rgba(248, 216, 73, 1);
		border-radius: 50rpx;
	}
</style>